<template>
  <view class="pc-login-bg">
    <view class="login-box no-border">
      <view class="login-title-row">
        <text class="login-title">修改密码</text>
        <view class="login-link">
          <text>记住密码？</text>
          <text class="to-login" @click="goLogin">&lt;&lt;返回登录</text>
        </view>
      </view>
      <view class="login-form">
        <!-- 账号（手机号）输入框 -->
        <view class="form-item">
          <text class="form-label">账号（手机号）</text>
          <view class="input-wrap white-bg">
            <uni-icons type="phone" size="26" color="#409eff" />
            <el-input 
              v-model="form.phone" 
              placeholder="请输入手机号" 
              class="input" 
              maxlength="11"
              clearable
            />
          </view>
        </view>

        <!-- 验证码输入框 -->
        <view class="form-item">
          <text class="form-label">验证码</text>
          <view class="input-wrap white-bg code-wrap">
            <uni-icons type="code-download" size="26" color="#409eff" />
            <el-input 
              v-model="form.code" 
              placeholder="输入验证码" 
              class="input code-input" 
              maxlength="6"
              clearable
            />
            <button class="get-code-btn" @click="getCode" :disabled="countdown > 0">
              {{ countdown > 0 ? `${countdown}s后重新获取` : '获取验证码' }}
            </button>
          </view>
        </view>

        <!-- 新密码输入框 -->
        <view class="form-item">
          <text class="form-label">请输入新密码</text>
          <view class="input-wrap white-bg">
            <uni-icons type="locked" size="26" color="#409eff" />
            <el-input 
              v-model="form.newPassword" 
              type="password" 
              placeholder="8-16位密码，由数字、字母或字符组成" 
              class="input"
              show-password
              clearable
            />
          </view>
        </view>

        <!-- 再次输入密码 -->
        <view class="form-item">
          <text class="form-label">再次输入</text>
          <view class="input-wrap white-bg">
            <uni-icons type="locked" size="26" color="#409eff" />
            <el-input 
              v-model="form.confirmPassword" 
              type="password" 
              placeholder="8-16位密码，由数字、字母或字符组成" 
              class="input"
              show-password
              clearable
            />
          </view>
        </view>

        <!-- 确认修改按钮 -->
        <button class="login-btn" @click="onResetPassword">确认修改</button>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue';
import { go } from '@/utils/nav.js';
import { onShow } from '@dcloudio/uni-app';

// 表单数据
const form = reactive({
  phone: '',
  code: '',
  newPassword: '',
  confirmPassword: ''
});

// 倒计时状态
const countdown = ref(0);

// 页面显示时显示提示弹窗
onShow(() => {
  uni.showModal({
    title: '提示',
    content: '功能暂未开启,修改密码请联系管理员',
    showCancel: false,
    confirmText: '确定',
    success: (res) => {
      if (res.confirm) {
        // 用户点击确定后返回登录页面
  go('/pages/pc/login', { replace: true });
      }
    }
  });
});

// 返回登录页面
const goLogin = () => {
  go('/pages/pc/login');
};

// 获取验证码
const getCode = () => {
  // 简单验证手机号
  if (!/^1[3-9]\d{9}$/.test(form.phone)) {
    uni.showToast({ title: '请输入正确的手机号', icon: 'none' });
    return;
  }

  // 模拟验证码发送
  countdown.value = 60;
  const timer = setInterval(() => {
    countdown.value--;
    if (countdown.value <= 0) {
      clearInterval(timer);
    }
  }, 1000);

  uni.showToast({ title: '验证码已发送', icon: 'success' });
};

// 确认修改密码
const onResetPassword = () => {
  // 表单验证
  if (!form.phone) {
    return uni.showToast({ title: '请输入手机号', icon: 'none' });
  }
  if (!form.code) {
    return uni.showToast({ title: '请输入验证码', icon: 'none' });
  }
  if (form.newPassword.length < 8 || form.newPassword.length > 16) {
    return uni.showToast({ title: '密码长度必须为8-16位', icon: 'none' });
  }
  if (form.newPassword !== form.confirmPassword) {
    return uni.showToast({ title: '两次输入的密码不一致', icon: 'none' });
  }

  uni.showToast({ title: '密码修改成功', icon: 'success' });
  setTimeout(() => {
    go('/pages/pc/login');
  }, 1500);
};
</script>

<style scoped>
/* 复用登录页面基础样式 */
.pc-login-bg {
  min-height: 100vh;
  background: linear-gradient(180deg, #eaf6ff 0%, #f8fafd 20%, #fdf6f6 100%);
  display: flex;
  align-items: center;
  justify-content: center;
}

.login-box {
  padding: 72px 64px 56px 64px;
  width: 520px;
  min-width: 340px;
}

.login-box.no-border {
  background: transparent;
  border-radius: 0;
  box-shadow: none;
}

.login-title-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 28px;
}

.login-title {
  font-size: 32px;
  font-weight: 700;
  color: #222;
}

.login-link {
  font-size: 17px;
  color: #888;
}

.to-login {
  color: #1976ed;
  cursor: pointer;
}

.login-form {
  margin-top: 18px;
}

.form-item {
  margin-bottom: 28px;
}

.form-label {
  font-size: 18px;
  color: #222;
  margin-bottom: 10px;
  display: block;
}

.input-wrap {
  display: flex;
  align-items: center;
  border: 1px solid #e3e7ed;
  border-radius: 8px;
  padding: 0 16px;
  height: 52px;
  font-size: 18px;
  background: #f7f8fa;
  transition: box-shadow 0.2s;
}

.input-wrap.white-bg {
  background: #fff;
}

.input {
  flex: 1;
  border: none;
  background: transparent;
  font-size: 18px;
  margin-left: 10px;
  outline: none;
}

/* Element Plus 输入框样式覆盖 */
:deep(.el-input) {
  flex: 1;
  margin-left: 10px;
}

:deep(.el-input__wrapper) {
  height: 52px;
  border: none;
  background: transparent;
  box-shadow: none;
  padding: 0;
}

:deep(.el-input__inner) {
  height: 52px;
  line-height: 52px;
  font-size: 18px;
  border: none;
  background: transparent;
  padding: 0;
}

:deep(.el-input__suffix) {
  height: 52px;
  line-height: 52px;
}

:deep(.el-input__suffix-inner) {
  height: 52px;
  line-height: 52px;
}

/* 验证码输入框容器需要相对定位 */
.code-wrap {
  position: relative;
}

/* 验证码输入框特殊样式 */
.code-input :deep(.el-input__inner) {
  padding-right: 140px;
}

.get-code-btn {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  width: 120px;
  height: 36px;
  background: #f5f7fa;
  color: #409eff;
  border-radius: 4px;
  font-size: 14px;
  padding: 0;
  line-height: 36px;
  border: none;
  cursor: pointer;
}

.get-code-btn:disabled {
  background: #eef1f6;
  color: #c0c4cc;
  cursor: not-allowed;
}

/* 确认修改按钮样式 */
.login-btn {
  width: 100%;
  height: 52px;
  background: linear-gradient(90deg, #1976ed 0%, #2386f8 100%);
  color: #fff;
  font-size: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 12px #e3e7ed;
  margin-top: 12px;
}
</style>



